<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/page01.css">

</head>
<body class="rank_page">

<div id="xianfengBox" class="">
  <!--科学先锋-->
  <div class="xianfeng_box fix swiper-container">
    <div class="swiper-wrapper"></div>
  </div>
</div>

</body>
<script type="text/javascript" charset="utf-8" src="../../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/swiper.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/common.js"></script>
<script>
$(function (){

  $('body').on('click','.left_box .play_btn',function () {
    $(this).addClass('hide');
    $(this).parents('.left_box').find('video')[0].play();
  })


  getData();

  function getData() {
    getJson('qyzl_KXXF.json',{},function (res) {
      if(res.code == 200){
        let html = ``;
        for (let i = 0; i < res.data.length; i++) {
          html += `<div class="swiper-slide"> <div class="left_box l">
<!--            <div class="play_btn"></div>-->
            <video muted autoplay="autoplay" loop="loop" src="../../video/j_shengtai.mp4" controls></video>
          </div>
          <div class="right_box l">
            <div class="title el2" title="${res.data[i].enterTitle || ''}">${res.data[i].enterTitle || ''}</div>
            <div class="describe el2" title="${res.data[i].remark || ''}">${res.data[i].remark || ''}</div>
          </div></div>`;
        }
        $('.swiper-wrapper').html(html);

        if(res.data.length > 1){
          let mySwiper = new Swiper ('.swiper-container', {
            autoplay: {
              delay: 3000,
              stopOnLastSlide: false,
              disableOnInteraction: true,
            },
            loop: true, // 循环模式选项
          })
        }


      }
    })
  }
})
</script>
</html>
